<template>
  <view class="navigator-bar">
    <view class="status-bar">
      <slot>
        <nut-navbar
          :title="title"
          :left-show="!!leftShow"
          @click-back="handleClickBack"
        >
          <slot name="left"></slot>
        </nut-navbar>
      </slot>
    </view>
    <slot name="content"></slot>
  </view>
</template>
<script setup lang="ts">
import { useSystemStore } from "@/src/store/use-system.store";
import { computed, useSlots } from "vue";
import Taro from "@tarojs/taro";

const slots = useSlots();
const { navigationHeight, navigationTop, navigationRight } = useSystemStore();
const navigationHeightString = computed(() => navigationHeight + "px");
const navigationTopString = computed(() => navigationTop + "px");
const navigationRightString = computed(() => {
  if (!slots.default) return;
  return navigationRight + "px";
});

defineProps<{
  leftShow?: Boolean;
  title?: string;
}>();

const handleClickBack = () => {
  Taro.navigateBack();
};
</script>

<style lang="scss">
.navigator-bar {
  display: flex;
  flex-direction: column;
  padding-top: v-bind(navigationTopString);
  position: sticky;
  top: 0;
  z-index: 2;
  background-color: var(--sub-theme-background);
}
.status-bar {
  height: v-bind(navigationHeightString);
  padding-right: v-bind(navigationRightString);
  display: flex;
  align-items: center;
  margin-bottom: 10px;
  .nut-searchbar {
    border-radius: 20px;
  }
  .nut-navbar {
    background-color: transparent !important;
    box-shadow: none;
    width: 100vw;
    position: sticky;
    top: 0;
    z-index: 2;
    .nut-navbar__title {
      .title {
        color: $title-color;
        font-size: 16px;
        font-weight: 700;
      }
    }
    .nut-icon-left {
      color: $title-color !important;
      font-weight: 700;
    }
  }
}
</style>
